<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>绘制线</title>
        <script src="glMatrix-0.9.6.min.js"></script>
        <script>
        let vertexstring = `
        attribute vec3 a_position;
        uniform  mat4  proj;
        void main(void){
            gl_Position = proj*vec4(a_position,1.0)  ;
            gl_PointSize=60.0;
        }
        `;
        let fragmentstring = `
        precision mediump float;
        void main(void){
          gl_FragColor = vec4(0.0,0.0,1.0,1.0);
        }
        `;
        var projMat4 = mat4.create();
        var webgl;

        function init() {
            initWebgl();
            initShader();
            initBuffer();
            draw();
        }

        function initWebgl() {
            let webglDiv = document.getElementById('myCanvas');
            webgl = webglDiv.getContext("webgl");

            /**
             * @function canvas.getContext("webgl") 创建webgl上下文
             * @function gl.viewport(x,y,canvas.width,canvas.height) 设置视口，即指定从标准设备到窗口坐标的 x、y 仿射变换 
            */
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);
            mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)
        }

        function initShader() {
            /**
             * @function gl.createShader(type) 创建一个WebGLShader着色器对象。type分为gl.VERTEXT_SHADER和gl.FRAGMENT_SHADER
             * @function gl.shaderSource(shader,source) 设置 WebGLShader 着色器（顶点着色器及片元着色器）的 GLSL 程序代码
             * @function gl.compileShader(shader) 编译一个 GLSL 着色器，使其成为为二进制数据，然后就可以被WebGLProgram对象所使用。
             * @function gl.getShaderParameter(shader,pname) 返回给定的着色器信息.pname分gl.DELETE_STATUS、gl.COMPILE_STATUS、gl.SHADER_TYPE
             * @function gl.createProgram() 创建和初始化一个 WebGLProgram 对象
             * @function gl.attachShader(program,shader) 负责往 WebGLProgram 添加一个片段或者顶点着色器
             * @function gl.linkProgram(program) 链接给定的WebGLProgram，从而完成为程序的片元和顶点着色器准备 GPU 代码的过程。
             * @function gl.useProgram(program) 将定义好的WebGLProgram 对象添加到当前的渲染状态中。
            */
            let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
            let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);

            webgl.shaderSource(vsshader, vertexstring);
            webgl.shaderSource(fsshader, fragmentstring);

            webgl.compileShader(vsshader);
            webgl.compileShader(fsshader);
            if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(vsshader);
                alert(err);
                return;
            }
            if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(fsshader);
                alert(err);
                return;
            }
            let program = webgl.createProgram();
            webgl.attachShader(program, vsshader);
            webgl.attachShader(program, fsshader)

            webgl.linkProgram(program);
            webgl.useProgram(program);

            webgl.program = program
        }

        function initBuffer() {
            /**
             * @function gl.getAttribLocation(program,name) 返回了给定WebGLProgram对象中某属性的下标指向位置
             * @function gl.createBuffer() 创建并初始化一个用于储存顶点数据或着色数据的WebGLBuffer对象
             * @function gl.bindBuffer(target,buffer) 将给定的WebGLBuffer绑定到目标.target分：gl.ARRAY_BUFFER(包含顶点属性的Buffer)、gl.ELEMENT_ARRAY_BUFFER(用于元素索引的Buffer)
             * @function gl.bufferData(target,ArrayBufferView_srcData,usage,srcOffset,length) 创建并初始化了 Buffer 对象的数据存储区
             * @function gl.enableVertexAttribArray(program,name) 返回了给定WebGLProgram对象中某属性的下标指向位置
             * @function gl.vertexAttribPointer(index,size,type,normalized,stride,offset) 绑定当前缓冲区范围到gl.ARRAY_BUFFER,成为当前顶点缓冲区对象的通用顶点属性并指定它的布局 (缓冲区对象中的偏移量)
             * type分：
             * gl.BYTE：有符号 8 位整数，值在 [-128， 127] 中 有符号的 8 位整数，范围 [-128, 127]
             * gl.SHORT：有符号 16 位整数，值在 [-32768， 32767] 中 有符号的 16 位整数，范围 [-32768, 32767]
             * gl.UNSIGNED_BYTE：无符号 8 位整数，值在 [0， 255] 中 无符号的 8 位整数，范围 [0, 255]
             * gl.UNSIGNED_SHORT：无符号 16 位整数，值在 [0， 65535] 中 无符号的 16 位整数，范围 [0, 65535]
             * gl.FLOAT：32 位 IEEE 浮点数 32 位 IEEE 标准的浮点数
             * gl.HALF_FLOAT：使用 WebGL 2 上下文时，16 位 IEEE 浮点数 16 位 IEEE 标准的浮点数
             * @function gl.getUniformLocation(program,name) 
             * @function gl.uniformMatrix4fv(program,name) 
            */
            let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
            let arr = [100.0,100.0,0, 200.0,200.0,0, 300.0,200.0,0 ,400,600,0];
            let vertexArr = new Float32Array(arr);
            let trangleBuffer =  webgl.createBuffer();
            webgl.bindBuffer(webgl.ARRAY_BUFFER,trangleBuffer);
            webgl.bufferData(webgl.ARRAY_BUFFER,vertexArr,webgl.STATIC_DRAW);
            webgl.enableVertexAttribArray(aPsotion);
            webgl.vertexAttribPointer(aPsotion,3, webgl.FLOAT, false, 3*4, 0);

            let uniformProj = webgl.getUniformLocation(webgl.program, "proj");
            webgl.uniformMatrix4fv(uniformProj, false, projMat4);
        }

        function draw() {
            /**
             * @function gl.clearColor(red,green,blue,alpha) 设置清空颜色缓冲时的颜色值,指定调用 clear() 方法时使用的颜色值
             * @function gl.clear(mask)  使用预设值来清空缓冲,mask分：gl.COLOR_BUFFER_BIT(颜色缓冲区)、gl.DEPTH_BUFFER_BIT(深度缓冲区)、gl.STENCIL_BUFFER_BIT(模板缓冲区)
             * @function gl.drawArrays(mode,first,count) 从向量数组中绘制图元,
             * mode分：
             * gl.POINTS: 绘制一系列点、
             * gl.LINE_STRIP: 绘制一个线条、
             * gl.LINE_LOOP: 绘制一个线圈
             * gl.LINES: 绘制一系列单独线段、
             * gl.TRIANGLE_STRIP：绘制一个三角带、
             * gl.TRIANGLE_FAN：绘制一个三角扇、
             * gl.TRIANGLES: 绘制一系列三角形
            */
            webgl.clearColor(0.0, 0.0, 0.0, 1.0);
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
            webgl.drawArrays(webgl.LINES,0,4);
            //webgl.drawArrays(webgl.LINE_STRIP,0,4)
            //webgl.drawArrays(webgl.LINE_LOOP,0,4)
            
        }
    </script>
    </head>
    <body onload="init()">
        <canvas id="myCanvas" width="1024" height="700"></canvas>
    </body>
</html>